<template>
  <el-tabs
    v-model="data.activeTab"
    class="demo-tabs"
    @tab-click="handleClickTab"
  >
    <el-tab-pane label="异常停充告警" name="terminal">
      <Table
        v-if="data.activeTab === 'terminal'"
        ref="tableRef"
        @get-list="getList"
        :columns="data.columns"
        :query="data.query"
        :toolbar="data.toolbar"
      ></Table>
    </el-tab-pane>
    <el-tab-pane label="连续启动失败" name="plie">
      <Table
        v-if="data.activeTab === 'plie'"
        :url="URL_GETCHARGEGFAILPAGE"
        ref="tableplieRef"
        :columns="plieData.columns"
        :query="plieData.query"
        :toolbar="plieData.toolbar"
      ></Table>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup name="historicalOrderList">
import Table from '@/components/table/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import { exportFile } from '@/utils/utils';
import {
  getStopAlarmPage,
  URL_GETGETSTOPALARMPAGE,
  URL_GETCHARGEGFAILPAGE,
  EXPORT_GETSTOPALARMPAGE,
  EXPORT_GETCHARGEGFAILPAG,
} from '@/service/apis/alarm';
import { equipmentBrandAndModelTreeData } from '@/service/apis/pile';
import moment from 'moment';

const router = useRouter();

const tableRef = ref();
const tableplieRef = ref();

//获取品牌型号数据
equipmentBrandAndModelTreeData({}).then((res: any) => {
  if (res) {
    data.query[2].props.options = [...res];
  }
});

const brandModel = (item: any) => {
  if (item.equipmentBrandName && item.equipmentModelName) {
    return `${item.equipmentBrandName}/${item.equipmentModelName}`;
  }
  return '--';
};

const data = reactive({
  pickDate: null as any,
  activeTab: 'terminal',
  columns: [
    {
      prop: 'connectorName',
      label: '终端名称',
      width: 160,
    },
    {
      prop: 'connectorCode',
      label: '终端编码',
      width: 160,
    },
    {
      prop: 'stationName',
      label: '归属电站',
      width: 160,
    },
    {
      prop: 'equipmentBrand',
      label: '品牌型号',
      template: (row: any) => {
        return brandModel(row);
      },
    },
    {
      prop: 'startChargeSeq',
      label: '充电订单',
    },
    {
      prop: 'alarmMsg',
      label: '订单结束原因',
    },
    {
      prop: 'alarmTime',
      label: '告警时间',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'operationalAlarmList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        const startData = tableRef?.value.getForm().alarmStartTime;
        const startData1 = tableRef?.value.getForm().alarmEndTime;
        const day = moment(startData1).diff(moment(startData), 'day');
        if ((startData || day > 0) && day < 63) {
          exportFile(
            EXPORT_GETSTOPALARMPAGE,
            '异常停充告警列表',
            tableRef.value?.getForm()
          );
        } else {
          ElMessageBox.alert(
            '单次导出最多支持导出周期为2个月的数据，请按时间筛选导出对象后再导出。',
            '提示',
            {
              confirmButtonText: '确认',
              type: 'warning',
            }
          );
        }
      },
      // handle: (row: any) => {
      //   exportFile(
      //     EXPORT_GETSTOPALARMPAGE,
      //     '异常停充告警列表',
      //     tableRef.value?.getForm()
      //   );
      // },
    },
  ],
  query: [
    {
      label: '终端编码',
      prop: 'connectorCode',
      comName: 'input',
      props: {
        placeholder: '请输入终端编码',
      },
    },
    {
      label: '归属电站',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入归属电站',
      },
    },
    {
      label: '品牌型号',
      prop: 'equipmentBrandModel',
      comName: 'cascader',
      props: {
        placeholder: '请选择品牌型号',
        props: {
          checkStrictly: true,
        },
        options: [] as any,
      },
    },
    {
      label: '告警时间',
      prop: 'alarmTime',
      comName: 'date',
      keys: ['alarmStartTime', 'alarmEndTime'],
      props: {
        type: 'daterange',
        calendarChange: (pick: any) => {
          let hasSelectDate = pick !== null && pick.length > 0;
          data.pickDate = hasSelectDate ? pick[0] : null;
        },
        change: (time: any) => {
          if (!time) {
            data.pickDate = null;
          }
        },
        disabledDate: (time: any): any => {
          if (data.pickDate) {
            const checkTime = data.pickDate.getTime();
            const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
            const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
            return time.getTime() > endTime || time.getTime() < startTime;
          } else {
            return false;
          }
        },
      },
    },
	{
	  label: '异常原因',
	  prop: 'errorStopReasonAlarmType',
	  comName: 'select',
	  props: {
	    placeholder: '请选择异常原因',
	    options: [] as any,
	  },
	},
  ],
});
const plieData = reactive({
  columns: [
    {
      prop: 'connectorName',
      label: '终端名称',
      width: 160,
    },
    {
      prop: 'connectorCode',
      label: '终端编码',
      width: 160,
    },
    {
      prop: 'stationName',
      label: '归属电站',
      width: 160,
    },
    {
      prop: 'equipmentBrand',
      label: '品牌型号',
      template: (row: any) => {
        return brandModel(row);
      },
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'chargeFailType',
      label: '失败类型',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'failTimes',
      label: '失败次数',
    },
    {
      prop: 'alarmTime',
      label: '告警时间',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'operationalAlarmList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        const startData = tableplieRef?.value.getForm().alarmStartTime;
        const startData1 = tableplieRef?.value.getForm().alarmEndTime;
        const day = moment(startData1).diff(moment(startData), 'day');
        if ((startData || day > 0) && day < 63) {
          exportFile(
            EXPORT_GETCHARGEGFAILPAG,
            '连续启动失败告警列表',
            tableplieRef.value?.getForm()
          );
        } else {
          ElMessageBox.alert(
            '单次导出最多支持导出周期为2个月的数据，请按时间筛选导出对象后再导出。',
            '提示',
            {
              confirmButtonText: '确认',
              type: 'warning',
            }
          );
        }
      },
      // handle: (row: any) => {
      //   exportFile(
      //     EXPORT_GETCHARGEGFAILPAG,
      //     '连续启动失败告警列表',
      //     tableplieRef.value?.getForm()
      //   );
      // },
    },
  ],
  query: [
    {
      label: '终端编码',
      prop: 'connectorCode',
      comName: 'input',
      props: {
        placeholder: '请输入终端编码',
      },
    },
    {
      label: '归属电站',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入归属电站',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '告警时间',
      prop: 'alarmTime',
      comName: 'date',
      keys: ['alarmStartTime', 'alarmEndTime'],
      props: {
        type: 'daterange',
        calendarChange: (pick: any) => {
          let hasSelectDate = pick !== null && pick.length > 0;
          data.pickDate = hasSelectDate ? pick[0] : null;
        },
        change: (time: any) => {
          if (!time) {
            data.pickDate = null;
          }
        },
        disabledDate: (time: any): any => {
          if (data.pickDate) {
            const checkTime = data.pickDate.getTime();
            const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
            const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
            return time.getTime() > endTime || time.getTime() < startTime;
          } else {
            return false;
          }
        },
      },
    },
  ],
});

queryDicByParent({
  listDtos: ['errorStopReasonAlarmType','ChargeFailType'],
}).then((res: any) => {
  if (res) {
    data.query[4].props.options = [...res.errorStopReasonAlarmType];
    plieData.columns[5].dic = [...res.ChargeFailType];
  }
});
const getList = (page: any, search: any) => {
  const form = search.ruleForm;
  delete form.equipmentBrand;
  delete form.equipmentModel;
  if (form.equipmentBrandModel?.length === 1) {
    form.equipmentBrand = form.equipmentBrandModel[0];
  }
  if (form.equipmentBrandModel?.length === 2) {
    form.equipmentBrand = form.equipmentBrandModel[0];
    form.equipmentModel = form.equipmentBrandModel[1];
  }
  if (form.alarmTime && form.alarmTime.length > 0) {
    form.alarmStartTime = form.alarmTime[0];
    form.alarmEndTime = form.alarmTime[1];
  } else {
    form.alarmStartTime = '';
    form.alarmEndTime = '';
  }
  getStopAlarmPage(form, page).then((res: any) => {
    if (res) {
      console.log('res---', res);
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getList(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};
const handleClickTab = (e: any) => {};
</script>